<template>
  <div class="app-container">
    <el-row :gutter="25">
      <el-col :span="25" :xs="24">
        <el-col :span="3">
          <div>
            <el-cascader v-model="selectedPlatForm" :options="platFormOptions" @change="handlePlatFormChange"
              :show-all-levels="false"></el-cascader>
          </div>
        </el-col>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="报告起始日期" prop="startDate">
            <el-date-picker clearable v-model="queryParams.startDate" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择报告起始日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="报告结束日期" prop="endDate">
            <el-date-picker clearable v-model="queryParams.endDate" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择报告结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8"
          style="margin-left: -5px; margin-right: -5px; margin-left: 10px;margin-top:10px;">
          <el-col :span="1.5">
            <!-- 上传 walmart账单报告 按钮 -->
            <el-button type="primary" size="mini" plain @click="uploadDialogVisible = true"
              v-hasPermi="['finance/walmartReport:uploadWalmartPaymentReport']">
              导入 walmart账单报告
            </el-button>
            <input type="file" ref="profitFileInput" style="display: none" accept=".csv" />
          </el-col>
          <el-col :span="1.5">
            <!-- 上传 库存对账单 按钮 -->
            <el-button type="primary" size="mini" plain @click="handleUploadInventoryLoading"
              v-hasPermi="['finance/walmartReport:uploadWalmartPaymentReport']">
              导入 库存对账单（销售及调整）
            </el-button>
            <input type="file" ref="storageFeeFileInput" style="display: none" accept=".csv" />
          </el-col>
          <el-col :span="1.5">
            <!-- 上传 仓储费账单 按钮 -->
            <el-button type="primary" size="mini" plain @click="handleUploadStorageFee"
              v-hasPermi="['finance/walmartReport:uploadWalmartPaymentReport']">
              导入 仓储费账单
            </el-button>
            <input type="file" ref="storageFeeFileInput" style="display: none" accept=".csv" />
          </el-col>

          <el-col :span="1.5">
            <!-- 上传 调整账单 按钮 -->
            <el-button type="warning" size="mini" plain @click="handleUploadAdjustments"
              v-hasPermi="['finance/walmartReport:uploadWalmartPaymentReport']">
              导入 调整账单
            </el-button>
            <input type="file" ref="adjustmentFileInput" style="display: none" accept=".csv" />
          </el-col>

          <el-col :span="1.5">
            <!-- 上传 广告费账单 按钮 -->
            <el-button type="danger" size="mini" plain @click="handleUploadProductAdvertising"
              v-hasPermi="['finance/walmartReport:uploadWalmartPaymentReport']">
              导入 广告费账单
            </el-button>
            <input type="file" ref="advertisingFeeFileInput" style="display: none" accept=".csv" />
          </el-col>

          <el-col :span="1.5">
            <!-- 导入PDF文件 按钮 -->
            <el-button type="primary" size="mini" plain @click="handleUploadPdf"
              v-hasPermi="['finance/walmartReport:uploadWalmartPaymentReport']">
              导入 pdf账单
            </el-button>
            <input type="file" ref="pdfFileInput" style="display: none" accept=".pdf" />
          </el-col>
          <el-col :span="1.5">
            <!-- 上传 库存对账单 按钮 -->
            <el-button type="warning" size="mini" plain @click="handleUploadInventory"
              v-hasPermi="['finance/walmartReport:uploadWalmartPaymentReport']">
              导入 库存对账单（期末数据）
            </el-button>
            <input type="file" ref="storageFeeFileInput" style="display: none" accept=".csv" />
          </el-col>
          <el-col :span="1.5">
            <!-- 导入PDF文件 按钮 -->
            <el-button type="danger" size="mini" plain @click="handleUploadIsCheck" v-if="1==2"
              v-hasPermi="['finance/walmartReport:uploadWalmartPaymentReport']">
              标记库存已对账
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <!-- 导入PDF文件 按钮 -->
            <el-button type="primary" size="mini" plain @click="handleUploadIsPaid"
              v-hasPermi="['finance/walmartReport:uploadWalmartProfitReportStatus']">
              标记已收款
            </el-button>

            <!-- 导入二次销售商品 按钮 -->
            <!-- <el-button type="primary" size="mini" plain @click="uploadAgainDialogVisible = true">
              导入二次销售商品
            </el-button> -->
          </el-col>
          <el-col :span="1.5" v-if="false">
            <input type="file" @change="onFileChange" />
            <button @click="dataUpload">上传</button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" size="mini" plain @click="handleExport">
              <i class="el-icon-download"></i> 导出数据
            </el-button>
          </el-col>
        </el-row>

      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="reportData" row-key="id" ref="reportTable" type="selection"
      class="main-table-no-scroll">
      <el-table-column type="selection" width="50" align="center" fixed="left" :reserve-selection="true" />

      <el-table-column align="center" width="20" type="expand">
        <template slot-scope="scope">
          <!-- 子表添加独立的滚动容器 -->
          <div class="sub-table-container" style="overflow-x: auto; min-width: 100%; white-space: nowrap;">
            <el-table :data="[
              { ...getTotalRow(scope.row.details), rate: scope.row.rate },
              ...scope.row.details.map(d => ({ ...d, rate: scope.row.rate }))
            ]" row-key="wprdId" :row-class-name="rowClassName" style="width: auto; min-width: 100%;">
              <el-table-column label="图片" prop="imageUrl" align="center">
                <template slot-scope="scope">
                  <div class="image-container">
                    <image-preview v-if="scope.row.imageUrl" :src="scope.row.imageUrl" :width="50" :height="50"
                      class="image-item" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="SKU" align="center" prop="sku" width="140px" />
              <el-table-column label="Seller SKU" align="center" prop="sellerSku" width="140px" />
              <el-table-column label="GTIN" align="center" prop="gtin" width="140px" />
              <el-table-column label="销售数量" align="center" prop="qty" width="80px">
                <template slot-scope="scope">
                  <span v-if="scope.row.qty !== undefined && scope.row.qty !== null">
                    {{ scope.row.qty }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="调整数量" align="center" prop="adjustQty" width="80px">
                <template slot-scope="scope">
                  <span v-if="scope.row.adjustQty !== undefined && scope.row.adjustQty !== null">
                    {{ scope.row.adjustQty }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="退货数量" align="center" prop="refundQty" width="80px">
                <template slot-scope="scope">
                  <span v-if="scope.row.refundQty !== undefined && scope.row.refundQty !== null">
                    {{ scope.row.refundQty }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="销售-商品价格" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice !== undefined && scope.row.salesProductPrice !== null">
                    {{ scope.row.salesProductPrice }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="销售-其他税费" align="center" prop="salesOtherTaxesFee" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesOtherTaxesFee !== undefined && scope.row.salesOtherTaxesFee !== null">
                    {{ scope.row.salesOtherTaxesFee }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.salesOtherTaxesFee">
                    {{ (scope.row.salesOtherTaxesFee / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="销售-佣金节省" align="center" prop="salesCommissionSavings" width="120px">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.salesCommissionSavings !== undefined && scope.row.salesCommissionSavings !== null">
                    {{ scope.row.salesCommissionSavings }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.salesCommissionSavings">
                    {{ (scope.row.salesCommissionSavings / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="销售-原始佣金" align="center" prop="salesCommission" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesCommission !== undefined && scope.row.salesCommission !== null">
                    {{ scope.row.salesCommission }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.salesCommission">
                    {{ (Math.abs(scope.row.salesCommission) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="销售-商品税" align="center" prop="salesTax" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesTax !== undefined && scope.row.salesTax !== null">
                    {{ scope.row.salesTax }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="销售-扣缴税" align="center" prop="salesTaxWithheld" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesTaxWithheld !== undefined && scope.row.salesTaxWithheld !== null">
                    {{ scope.row.salesTaxWithheld }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="销售-Walmart资助折扣" align="center" prop="salesFundedSavings" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesFundedSavings !== undefined && scope.row.salesFundedSavings !== null">
                    {{ scope.row.salesFundedSavings }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.salesFundedSavings">
                    {{ (scope.row.salesFundedSavings / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="退款-商品价格" align="center" prop="refundProductPrice" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.refundProductPrice !== undefined && scope.row.refundProductPrice !== null">
                    {{ scope.row.refundProductPrice }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.refundProductPrice">
                    {{ (Math.abs(scope.row.refundProductPrice) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="退款-商品佣金" align="center" prop="refundCommission" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.refundCommission !== undefined && scope.row.refundCommission !== null">
                    {{ scope.row.refundCommission }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.refundCommission">
                    {{ (Math.abs(scope.row.refundCommission) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="退款-Walmart资助折扣" align="center" prop="refundFundedSavings" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.refundFundedSavings !== undefined && scope.row.refundFundedSavings !== null">
                    {{ scope.row.refundFundedSavings }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.refundFundedSavings">
                    {{ (scope.row.refundFundedSavings / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="退款-商品税" align="center" prop="refundTax" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.refundTax !== undefined && scope.row.refundTax !== null">
                    {{ scope.row.refundTax }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="退款-扣缴税" align="center" prop="refundTaxWithheld" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.refundTaxWithheld !== undefined && scope.row.refundTaxWithheld !== null">
                    {{ scope.row.refundTaxWithheld }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="WFS 履约费用" align="center" prop="wfsFulfillmentFee" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.wfsFulfillmentFee !== undefined && scope.row.wfsFulfillmentFee !== null">
                    {{ scope.row.wfsFulfillmentFee }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.wfsFulfillmentFee">
                    {{ (Math.abs(scope.row.wfsFulfillmentFee) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="WFS 退货运费" align="center" prop="wfsReturnShippingFee" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.wfsReturnShippingFee !== undefined && scope.row.wfsReturnShippingFee !== null">
                    {{ scope.row.wfsReturnShippingFee }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.wfsReturnShippingFee">
                    {{ (Math.abs(scope.row.wfsReturnShippingFee) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="WFS 仓储费" align="center" prop="wfsStorageFee" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.wfsStorageFee !== undefined && scope.row.wfsStorageFee !== null">
                    {{ scope.row.wfsStorageFee }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.wfsStorageFee">
                    {{ (Math.abs(scope.row.wfsStorageFee) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="WFS 库存调整费或补偿" align="center" prop="wfsAdjustments" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.wfsAdjustments !== undefined && scope.row.wfsAdjustments !== null">
                    {{ scope.row.wfsAdjustments }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.wfsAdjustments">
                    {{ (scope.row.wfsAdjustments / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="WFS RC费用" align="center" prop="wfsRcFee" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.wfsRcFee !== undefined && scope.row.wfsRcFee !== null">
                    {{ scope.row.wfsRcFee }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.wfsRcFee">
                    {{ (Math.abs(scope.row.wfsRcFee) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="WFS 库存转移费" align="center" prop="wfsInventoryTransferFee" width="120px">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.wfsInventoryTransferFee !== undefined && scope.row.wfsInventoryTransferFee !== null">
                    {{ scope.row.wfsInventoryTransferFee }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.wfsInventoryTransferFee">
                    {{ (Math.abs(scope.row.wfsInventoryTransferFee) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="WFS Charge费" align="center" prop="wfsChargeFee" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.wfsChargeFee !== undefined && scope.row.wfsChargeFee !== null">
                    {{ scope.row.wfsChargeFee }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.wfsChargeFee">
                    {{ (Math.abs(scope.row.wfsChargeFee) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="商品广告费" align="center" prop="productAdvertising" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.productAdvertising !== undefined && scope.row.productAdvertising !== null">
                    {{ scope.row.productAdvertising }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.productAdvertising">
                    {{ (Math.abs(scope.row.productAdvertising) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="SEM" align="center" prop="sem" width="100px">
                <template slot-scope="scope">
                  <span v-if="scope.row.sem !== undefined && scope.row.sem !== null">
                    {{ scope.row.sem }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.sem">
                    {{ (Math.abs(scope.row.sem) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="其他费用" align="center" prop="otherFee" width="100px">
                <template slot-scope="scope">
                  <span v-if="scope.row.otherFee !== undefined && scope.row.otherFee !== null">
                    {{ scope.row.otherFee }}
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="占比" align="center" width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.salesProductPrice && scope.row.otherFee">
                    {{ (Math.abs(scope.row.otherFee) / scope.row.salesProductPrice * 100).toFixed(2) }}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="打款金额＄" align="center" prop="salesPrice" width="90px"
                :formatter="formatSalesPrice" />
              <el-table-column label="汇率" align="center" prop="rate" />
              <el-table-column label="打款金额￥" align="center" width="95px">
                <template slot-scope="scope">
                  {{ formatFinalCny(scope.row) }}
                </template>
              </el-table-column>
              <el-table-column label="库存差异" align="center" prop="diffQty">
                <template slot-scope="scope">
                  <span v-if="scope.row.productCost != null && scope.row.diffQty != 0" class="red-text">
                    {{ scope.row.diffQty }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="产品成本" align="center" prop="productCost" :show-overflow-tooltip="true"
                width="100px">
                <!-- 自定义标题 -->
                <template slot-scope="scope">
                  <span @click="openShipmentMatchDialog(scope.row.wprId, scope.row.sku, scope.row.gtin)"
                    :class="{ '_matchunderlined': scope.row.sku !== '合计' }">
                    {{ scope.row.productCost != null ? Number(scope.row.productCost).toFixed(2) : '' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="头程运费" align="center" prop="firstLeg" :show-overflow-tooltip="true" width="100px">
                <!-- 自定义标题 -->
                <template slot-scope="scope">
                  <span @click="openShipmentMatchDialog(scope.row.wprId, scope.row.sku, scope.row.gtin)" :class="{
                    '_matchunderlined': scope.row.sku !== '合计',
                    'red-text': scope.row.hasZeroFirstLeg === true
                  }">
                    {{ scope.row.firstLeg != null ? Number(scope.row.firstLeg).toFixed(2) : '' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="毛利率" align="center" width="100px">
                <template slot-scope="scope">
                  <!-- 计算毛利率 -->
                  {{ calculateProfitMargin(scope.row) }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>

      </el-table-column>

      <el-table-column label="账单编号" align="center" prop="reportCode" width="150px" />
      <el-table-column label="店铺" align="center" prop="shopName" />
      <el-table-column label="打款金额＄" align="center" prop="payoutAmount" />
      <el-table-column label="汇率" align="center" prop="rate" />
      <el-table-column label="打款金额￥" align="center">
        <template #default="{ row }">
          {{ (row.payoutAmount * row.rate).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="WFS Storage Fee" align="center" prop="storageFeeTotal" />
      <el-table-column label="WFS Adjustments" align="center" prop="adjustmentsTotal" />
      <el-table-column label="WFS RC inventory Disposal Fee" align="center" prop="disposalFeeTotal" :formatter="(row, column, cellValue) => {
        return (typeof cellValue === 'number' && !isNaN(cellValue)) ? cellValue.toFixed(2) : '-';
      }" />
      <el-table-column label="WFS Inventory Transfer Fee" align="center" prop="inventoryTransferFeeTotal" />
      <el-table-column label="Walmart Product Advertising" align="center" prop="advertisingFeeTotal" />
      <el-table-column label="SEM" align="center" prop="semFeeTotal" width="80px" :formatter="(row, column, cellValue) => {
        return (typeof cellValue === 'number' && !isNaN(cellValue)) ? cellValue.toFixed(2) : '-';
      }" />
      <el-table-column label="Other Fee" align="center" prop="otherFeeTotal" width="80px" :formatter="(row, column, cellValue) => {
        return (typeof cellValue === 'number' && !isNaN(cellValue)) ? cellValue.toFixed(2) : '-';
      }" />
      <el-table-column label="账单状态" align="center" prop="status" width="120px">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.walmart_profit_report_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="账单图片" prop="imagePath" align="center">
        <template slot-scope="scope">
          <div class="image-container">
            <image-preview v-if="scope.row.imagePath" :src="scope.row.imagePath" :width="50" :height="50"
              class="image-item" />
          </div>
        </template>
      </el-table-column>
       <el-table-column label="收款状态" align="center" prop="paidStatus" width="120px">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.walmart_profit_report_paidstatus" :value="scope.row.paidStatus" />
        </template>
      </el-table-column>
      <el-table-column label="起止日期" align="center" width="95px">
        <template slot-scope="scope">
          {{ scope.row.startDate ? scope.row.startDate.split('T')[0] : '' }}<br />
          {{ scope.row.endDate ? scope.row.endDate.split('T')[0] : '' }}
        </template>
      </el-table-column>
      <el-table-column label="创建信息" align="center" width="155px">
        <template slot-scope="scope">
          <div>
            {{ scope.row.createdBy }}<br />
            {{ parseTime(scope.row.createTime, "{y}-{m}-{d} {hh}:{dd}:{ss}") }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 固定底部的滚动条 -->
    <vue-perfect-scrollbar ref="fixedScrollbar" class="fixed-scrollbar" :settings="scrollbarSettings"
      @ps-scroll-x="handleScrollbarScroll">
      <div :style="{ width: '7500px', height: '1px' }"></div>
    </vue-perfect-scrollbar>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 导入账单对话框 -->
    <el-dialog title="导入 Walmart 账单" :visible.sync="uploadDialogVisible" width="500px">
      <el-form :model="uploadForm" label-width="80px">
        <el-form-item label="店铺">
          <el-cascader v-model="uploadForm.authId" :options="platFormOptions" :show-all-levels="false"
            placeholder="请选择店铺"></el-cascader>
        </el-form-item>
        <el-form-item label="汇率">
          <el-input v-model="uploadForm.rate" placeholder="请输入汇率" style="width:58%"></el-input>
        </el-form-item>
        <el-form-item label="选择文件">
          <el-upload action="#" :show-file-list="false" :before-upload="handleBeforeUpload" accept=".csv">
            <el-button type="primary" size="mini">选择 CSV 文件</el-button>
            <span v-if="uploadForm.fileName" style="margin-left: 10px;">{{ uploadForm.fileName }}</span>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="cancelUpload">取消</el-button>
        <el-button type="primary" @click="submitUpload" v-loading="uploadLoading">提交</el-button>
      </template>
    </el-dialog>

    <!-- 导入仓储费账单对话框 -->
    <el-dialog title="导入 仓储费账单" :visible.sync="uploadStorageFeeDialogVisible" width="500px">
      <el-form :model="uploadForm" label-width="80px">
        <el-form-item label="选择文件">
          <el-upload action="#" :show-file-list="false" :before-upload="handleBeforeUpload" accept=".csv">
            <el-button type="primary" size="mini">选择 CSV 文件</el-button>
            <span v-if="uploadForm.fileName" style="margin-left: 10px;">{{ uploadForm.fileName }}</span>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <!-- 取消按钮：清空文件内容 -->
        <el-button @click="cancelUpload">取消</el-button>
        <!-- 确认按钮：校验上传文件 -->
        <el-button type="primary" @click="submitUploadStorageFee" v-loading="uploadLoading">确认</el-button>
      </template>
    </el-dialog>

    <!-- 导入调整费账单对话框 -->
    <el-dialog title="导入 调整费账单" :visible.sync="uploadAdjustmentDialogVisible" width="500px">
      <el-form :model="uploadForm" label-width="80px">
        <el-form-item label="选择文件">
          <el-upload action="#" :show-file-list="false" :before-upload="handleBeforeUpload" accept=".csv">
            <el-button type="primary" size="mini">选择 CSV 文件</el-button>
            <span v-if="uploadForm.fileName" style="margin-left: 10px;">{{ uploadForm.fileName }}</span>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <!-- 取消按钮：清空文件内容 -->
        <el-button @click="cancelUpload">取消</el-button>
        <!-- 确认按钮：校验上传文件 -->
        <el-button type="primary" @click="submitUploadAdjustment" v-loading="uploadLoading">确认</el-button>
      </template>
    </el-dialog>

    <!-- 导入广告费账单对话框 -->
    <el-dialog title="导入 广告费账单" :visible.sync="uploadAdvertisingFeeDialogVisible" width="500px">
      <el-form :model="uploadForm" label-width="80px">
        <el-form-item label="选择文件">
          <el-upload action="#" :show-file-list="false" :before-upload="handleBeforeUpload" accept=".csv">
            <el-button type="primary" size="mini">选择 CSV 文件</el-button>
            <span v-if="uploadForm.fileName" style="margin-left: 10px;">{{ uploadForm.fileName }}</span>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <!-- 取消按钮：清空文件内容 -->
        <el-button @click="cancelUpload">取消</el-button>
        <!-- 确认按钮：校验上传文件 -->
        <el-button type="primary" @click="submitUploadProductAdvertising" v-loading="uploadLoading">确认</el-button>
      </template>
    </el-dialog>

    <!-- 导入库存对账单对话框 -->
    <el-dialog title="导入 库存对账单" :visible.sync="uploadInventoryLoadingDialogVisible" width="500px">
      <el-form :model="uploadForm" label-width="80px">
        <el-form-item label="选择文件">
          <el-upload action="#" :show-file-list="false" :before-upload="handleBeforeUpload" accept=".csv">
            <el-button type="primary" size="mini">选择 CSV 文件</el-button>
            <span v-if="uploadForm.fileName" style="margin-left: 10px;">{{ uploadForm.fileName }}</span>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <!-- 取消按钮：清空文件内容 -->
        <el-button @click="cancelUpload">取消</el-button>
        <!-- 确认按钮：校验上传文件 -->
        <el-button type="primary" @click="submitUploadInventoryLoading" v-loading="uploadLoading">确认</el-button>
      </template>
    </el-dialog>

    <!-- 导入库存对账单对话框 -->
    <el-dialog title="导入 库存对账单" :visible.sync="uploadInventoryDialogVisible" width="500px">
      <el-form :model="uploadForm" label-width="80px">
        <el-form-item label="选择文件">
          <el-upload action="#" :show-file-list="false" :before-upload="handleBeforeUpload" accept=".csv">
            <el-button type="primary" size="mini">选择 CSV 文件</el-button>
            <span v-if="uploadForm.fileName" style="margin-left: 10px;">{{ uploadForm.fileName }}</span>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <!-- 取消按钮：清空文件内容 -->
        <el-button @click="cancelUpload">取消</el-button>
        <!-- 确认按钮：校验上传文件 -->
        <el-button type="primary" @click="submitUploadInventory" v-loading="uploadLoading">确认</el-button>
      </template>
    </el-dialog>

    <!-- 导入PDF账单对话框 -->
    <el-dialog title="导入 pdf账单" :visible.sync="uploadPdfDialogVisible" width="500px">
      <el-form :model="uploadForm" label-width="80px">
        <el-form-item label="选择文件">
          <el-upload action="#" :show-file-list="false" :before-upload="handleBeforeUpload" accept=".pdf">
            <el-button type="primary" size="mini">选择 pdf 文件</el-button>
            <span v-if="uploadForm.fileName" style="margin-left: 10px;">{{ uploadForm.fileName }}</span>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <!-- 取消按钮：清空文件内容 -->
        <el-button @click="cancelUpload">取消</el-button>
        <!-- 确认按钮：校验上传文件 -->
        <el-button type="primary" @click="submitUploadPdf" v-loading="uploadLoading">确认</el-button>
      </template>
    </el-dialog>

    <!-- 查看匹配的成本和头程 -->
    <el-dialog title="产品成本/头程明细" :visible.sync="openShipmentMatchDialogVisible" width="1300px">
      <!-- 表格展示 -->
      <el-table :data="shipmentMatchData" style="width: 100%">
        <el-table-column label="图片" prop="imageUrl" align="center" width="50">
          <template slot-scope="scope">
            <div class="image-container">
              <image-preview v-if="scope.row.imageUrl" :src="scope.row.imageUrl" :width="50" :height="50"
                class="image-item" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="SKU" prop="sku" align="center" />
        <el-table-column label="GTIN" prop="gtin" align="center" />
        <el-table-column label="产品成本" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.productCost.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="头程" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.firstLeg.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="匹配数量" prop="matchedQty" align="center" width="80" />
        <el-table-column label="ShipmentId" prop="shipmentId" align="center" />
        <el-table-column label="入库时间" align="center" width="150">
          <template slot-scope="scope">
            {{
              parseTime(scope.row.actualDeliveryDate, "{y}-{m}-{d} {h}:{m}:{s}")
            }}
          </template>
        </el-table-column>
        <el-table-column label="入库数量" prop="receivedQty" align="center" />
        <el-table-column label="匹配时间" align="center" width="150">
          <template slot-scope="scope">
            {{
              parseTime(scope.row.matchedTime, "{y}-{m}-{d} {h}:{m}:{s}")
            }}
          </template>
        </el-table-column>
        <el-table-column label="店铺" prop="shopName" align="center" />
      </el-table>
      <template #footer>
        <!-- 取消按钮：清空文件内容 -->
        <el-button @click="openShipmentMatchDialogVisible = false">关闭</el-button>
        <!-- 确认按钮：校验上传文件 -->
      </template>
    </el-dialog>

    <!-- 导入二次销售商品对话框 -->
    <el-dialog title="导入二次销售商品" :visible.sync="uploadAgainDialogVisible" width="500px">
      <el-form :model="uploadForm" label-width="80px">
        <el-form-item label="店铺">
          <el-cascader v-model="uploadForm.authId" :options="platFormOptions" :show-all-levels="false"
            placeholder="请选择店铺"></el-cascader>
        </el-form-item>

        <el-form-item label="选择文件">
          <el-upload action="#" :show-file-list="false" :before-upload="handleBeforeUpload" accept=".xlsx">
            <el-button type="primary" size="mini">选择 xlsx 文件</el-button>
            <span v-if="uploadForm.fileName" style="margin-left: 10px;">{{ uploadForm.fileName }}</span>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="cancelUpload">取消</el-button>
        <el-button type="primary" @click="submitAgain" v-loading="uploadLoading">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import {
  listWalmartProfitRepor,//列表查询
  uploadWalmartPaymentReport,//导入总账单
  uploadWalmartStorageFeeReport,//导入仓储费账单
  uploadWalmartAdjustmentsReport,//导入调整费账单
  uploadWalmartProductAdvertisingReport,//导入广告费账单
  uploadWalmartInventoryReconciliationReport,//导入库存对账单(期末数据)
  uploadWalmartInventoryLoadingReconciliationReport,//导入库存对账单
  uploadWalmartPdfReport,//导入pdf
  uploadWalmartProfitReportInentrotyStatus,//标记库存已对账
  uploadWalmartProfitReportStatus,//标记已收款
  listShipmentMatch,//匹配列表（成本、头程）
  uploadWalmartShipmentStockAgain,//上传二次销售商品
  uploadInitData//初始化数据
} from "@/api/finance/walmartProfit";
import { getPlatFormTree } from "@/api/walmart/auth";
import Decimal from 'decimal.js';
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
export default {
  dicts: [
    "walmart_profit_report_status",
    "walmart_profit_report_paidstatus"
  ],
  data() {
    return {
      platFormOptions: [],//店铺列表
      reportData: [],//账单数据
      shipmentMatchData: [],//匹配数据
      loading: false,
      uploadDialogVisible: false,//导入总账单
      uploadStorageFeeDialogVisible: false,//导入仓储费账单
      uploadAdjustmentDialogVisible: false,//导入调整费账单
      uploadAdvertisingFeeDialogVisible: false,//导入广告费账单
      uploadInventoryLoadingDialogVisible: false,//导入库存对账单
      uploadInventoryDialogVisible: false,//导入库存对账单
      uploadPdfDialogVisible: false,//导入PDF账单
      openShipmentMatchDialogVisible: false,//查看匹配的成本和头程
      uploadAgainDialogVisible: false,//导入二次销售商品
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        authId: '',
        startDate: null,
        endDate: null,
      },
      //上传报表
      uploadForm: {
        authId: '',
        file: null,
        fileName: '',
        wprId: '',
        rate: '',
      },
      uploadLoading: false,//控制loading 的变量
      selectedPlatForm: null,
      total: 0,
      shipmentMatchParams: {},
      dataFile: null,
      scrollWidth: 0,
      scrollbarSettings: {
        suppressScrollY: true, // 禁用垂直滚动
        wheelPropagation: false, // 阻止滚动事件冒泡
        minScrollbarLength: 30
      }
    };
  },
  created() {
    this.getPlatForm();
    this.getList();
  },
  components: {
    VuePerfectScrollbar
  },
  mounted() {
    this.initScrollbar();
    this.bindTableScrollEvent();
  },
  beforeDestroy() {
    this.removeTableScrollEvent();
  },
  methods: {
    /** 查询店铺名称列表 */
    getPlatForm() {
      getPlatFormTree().then((response) => {
        this.platFormOptions = response.data;
      });
    },
    /** 查询*/
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      this.queryParams.authId = this.selectedPlatForm && this.selectedPlatForm[2] ? this.selectedPlatForm[2] : null;
      listWalmartProfitRepor(this.queryParams).then((response) => {
        this.reportData = response.rows;
        this.total = response.total;
      });
    },
    /** 重置*/
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        authId: '',
        startDate: null,
        endDate: null,
      };
      this.selectedPlatForm = null;
      this.getList();
    },
    handlePlatFormChange(value) {
      // 如果需要，可以将选中的值更新到 queryParams.authId
      this.queryParams.authId = value[2]; // 假设你选择的值保存在 value[2]

      // 调用 getList() 方法来执行查询
      this.getList();
    },
    handleBeforeUpload(file) {
      this.uploadForm.file = file;
      this.uploadForm.fileName = file.name;
      return false; // 阻止自动上传
    },
    /** 上传账单*/
    async submitUpload() {
      let { authId, file, rate } = this.uploadForm;
      authId = this.uploadForm.authId[2];
      if (!authId || !file) {
        this.$message.warning("请先选择店铺和上传文件");
        return;
      }
      if (rate === null || rate === '' || isNaN(rate)) {
        this.$message.warning("请先填写有效的汇率（数字）");
        return;
      }
      this.uploadLoading = true;

      const formData = new FormData();
      formData.append("csvFile", file);
      formData.append("authId", authId);
      formData.append("rate", rate);

      uploadWalmartPaymentReport(formData)
        .then((res) => {
          // 检查响应中是否包含错误信息
          if (res.success === false) {
            this.$message.error(res.error || "上传失败，请稍后重试");
            return;
          }

          this.$message.success("Walmart账单上传成功！");
          this.$refs.reportTable.clearSelection();
          this.getList();
          this.uploadDialogVisible = false;
          // 清空上传表单内容
          this.resetUploadForm();
        })
        .catch((err) => {
          // 处理网络错误等非业务逻辑错误
          console.error("上传错误:", err);
          this.$message.error("上传失败：网络连接出现问题，请稍后重试");
        })
        .finally(() => {
          this.uploadLoading = false;
        });
    },
    // 添加重置上传表单的方法
    resetUploadForm() {
      this.uploadForm = {
        authId: '',
        file: null,
        fileName: '',
        wprId: '',
      };
    },
    // 点击取消按钮时清空表单
    cancelUpload() {
      this.uploadDialogVisible = false;
      this.uploadStorageFeeDialogVisible = false;
      this.uploadAdjustmentDialogVisible = false;
      this.uploadAdvertisingFeeDialogVisible = false;
      this.uploadPdfDialogVisible = false;
      this.uploadInventoryDialogVisible = false;
      this.uploadInventoryLoadingDialogVisible = false;
      this.resetUploadForm();
    },

    //导入仓储费
    handleUploadStorageFee() {
      this.resetUploadForm();
      // 获取所有选中的账单
      const selectedRows = this.$refs.reportTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning("请勾选至少一个账单");
        return;
      }
      // 获取选中账单的 ID
      const selectedIds = selectedRows.map(row => row.id);  // 提取选中的账单 ID
      // 如果你需要只选择一个账单的 ID
      if (selectedIds.length > 1) {
        this.$message.warning("只能选择一个账单");
        return;
      }
      const selectedId = selectedIds[0];  // 获取第一个选中的账单 ID
      this.uploadForm.wprId = selectedId;
      // 检查所选账单的状态
      const invalidRows = selectedRows.filter(row => row.status !== '0');
      if (invalidRows.length > 0) {
        this.$message.warning("只能选择状态为【待导入仓储费账单】的账单");
        return;
      }
      // 如果所有条件都满足，显示上传对话框
      this.uploadStorageFeeDialogVisible = true;
    },
    //仓储费提交按钮
    submitUploadStorageFee() {
      if (!this.uploadForm.file) {
        this.$message.warning("请上传 CSV 文件");
        return;
      }

      this.uploadLoading = true;

      const formData = new FormData();
      formData.append("csvFile", this.uploadForm.file);
      formData.append("wprId", this.uploadForm.wprId);

      uploadWalmartStorageFeeReport(formData)
        .then((res) => {
          // 检查响应中是否包含错误信息
          if (res.success === false) {
            this.$message.error(res.error || "上传失败，请稍后重试");
            return;
          }

          this.$message.success("Walmart仓储费账单上传成功！");
          this.uploadStorageFeeDialogVisible = false;
          this.getList();
          // 清空上传表单内容
          this.resetUploadForm();
        })
        .catch((err) => {
          // 处理网络错误等非业务逻辑错误
          console.error("上传错误:", err);
          this.$message.error("上传失败：网络连接出现问题，请稍后重试");
        })
        .finally(() => {
          this.uploadLoading = false;
        });
    },

    //导入调整费
    handleUploadAdjustments() {
      this.resetUploadForm();
      // 获取所有选中的账单
      const selectedRows = this.$refs.reportTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning("请勾选至少一个账单");
        return;
      }
      // 获取选中账单的 ID
      const selectedIds = selectedRows.map(row => row.id);  // 提取选中的账单 ID
      // 如果你需要只选择一个账单的 ID
      if (selectedIds.length > 1) {
        this.$message.warning("只能选择一个账单");
        return;
      }
      const selectedId = selectedIds[0];  // 获取第一个选中的账单 ID
      this.uploadForm.wprId = selectedId;
      // 检查所选账单的状态
      const invalidRows = selectedRows.filter(row => row.status !== '1');
      if (invalidRows.length > 0) {
        this.$message.warning("只能选择状态为【待导入调整费账单】的账单");
        return;
      }
      // 如果所有条件都满足，显示上传对话框
      this.uploadAdjustmentDialogVisible = true;
    },
    // 调整费提交按钮
    submitUploadAdjustment() {
      if (!this.uploadForm.file) {
        this.$message.warning("请上传 CSV 文件");
        return;
      }

      this.uploadLoading = true;

      const formData = new FormData();
      formData.append("csvFile", this.uploadForm.file);
      formData.append("wprId", this.uploadForm.wprId);

      const doUpload = (attempt) => {
        uploadWalmartAdjustmentsReport(formData)
          .then((res) => {
            if (attempt === 2) {
              if (res.success === false) {
                this.$message.error(res.error || "上传失败，请稍后重试");
              } else {
                this.$message.success("Walmart调整费账单上传成功！");
              }
            }
          })
          .catch((err) => {
            this.$message.error(`上传失败：${err.message || "网络错误"}`);
          })
          .finally(() => {
            if (attempt === 1) {
              // 等待 2 秒再上传第二次，避免重复提交冲突
              setTimeout(() => {
                doUpload(2);
              }, 2000);
            } else {
              this.uploadAdjustmentDialogVisible = false;
              this.getList();
              this.resetUploadForm();
              this.uploadLoading = false;
            }
          });
      };
      doUpload(1);
    },
    //导入广告费
    handleUploadProductAdvertising() {
      this.resetUploadForm();
      // 获取所有选中的账单
      const selectedRows = this.$refs.reportTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning("请勾选至少一个账单");
        return;
      }
      // 获取选中账单的 ID
      const selectedIds = selectedRows.map(row => row.id);  // 提取选中的账单 ID
      // 如果你需要只选择一个账单的 ID
      if (selectedIds.length > 1) {
        this.$message.warning("只能选择一个账单");
        return;
      }
      const selectedId = selectedIds[0];  // 获取第一个选中的账单 ID
      this.uploadForm.wprId = selectedId;
      // 检查所选账单的状态
      const invalidRows = selectedRows.filter(row => row.status !== '2');
      if (invalidRows.length > 0) {
        this.$message.warning("只能选择状态为【待导入广告费账单】的账单");
        return;
      }
      // 如果所有条件都满足，显示上传对话框
      this.uploadAdvertisingFeeDialogVisible = true;
    },
    //广告费提交按钮
    submitUploadProductAdvertising() {
      if (!this.uploadForm.file) {
        this.$message.warning("请上传 CSV 文件");
        return;
      }

      this.uploadLoading = true;

      const formData = new FormData();
      formData.append("csvFile", this.uploadForm.file);
      formData.append("wprId", this.uploadForm.wprId);

      const doUpload = (attempt) => {
        uploadWalmartProductAdvertisingReport(formData)
          .then((res) => {
            if (attempt === 2) {
              if (res.success === false) {
                this.$message.error(res.error || "上传失败，请稍后重试");
              } else {
                this.$message.success("Walmart广告费账单上传成功！");
              }
            }
          })
          .catch((err) => {
            this.$message.error(`上传失败：${err.message || "网络错误"}`);
          })
          .finally(() => {
            if (attempt === 1) {
              // 第一次上传完，等 2 秒执行第二次
              setTimeout(() => {
                doUpload(2);
              }, 2000);
            } else {
              // 第二次上传结束后统一处理
              this.uploadAdvertisingFeeDialogVisible = false;
              this.getList();
              this.resetUploadForm();
              this.uploadLoading = false;
            }
          });
      };

      doUpload(1);
    },

    //导入库存对账单
    handleUploadInventoryLoading() {
      this.resetUploadForm();
      // 获取所有选中的账单
      const selectedRows = this.$refs.reportTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning("请勾选至少一个账单");
        return;
      }
      // 获取选中账单的 ID
      const selectedIds = selectedRows.map(row => row.id);  // 提取选中的账单 ID
      // 如果你需要只选择一个账单的 ID
      if (selectedIds.length > 1) {
        this.$message.warning("只能选择一个账单");
        return;
      }
      const selectedId = selectedIds[0];  // 获取第一个选中的账单 ID
      this.uploadForm.wprId = selectedId;
      // 检查所选账单的状态
      const invalidRows = selectedRows.filter(row => row.status !== '8');
      if (invalidRows.length > 0) {
        this.$message.warning("只能选择状态为【库存对账单（销售及调整）】的账单");
        return;
      }
      // 如果所有条件都满足，显示上传对话框
      this.uploadInventoryLoadingDialogVisible = true;
    },
    //库存对账单提交按钮
    submitUploadInventoryLoading() {
      if (!this.uploadForm.file) {
        this.$message.warning("请上传 CSV 文件");
        return;
      }

      this.uploadLoading = true;

      const formData = new FormData();
      formData.append("csvFile", this.uploadForm.file);
      formData.append("wprId", this.uploadForm.wprId);

      uploadWalmartInventoryLoadingReconciliationReport(formData)
        .then((res) => {
          // 检查响应中是否包含错误信息
          if (res.success === false) {
            this.$message.error(res.error || "上传失败，请稍后重试");
            return;
          }

          this.$message.success("Walmart库存对账单上传成功！");
          this.uploadInventoryLoadingDialogVisible = false;
          this.getList();
          // 清空上传表单内容
          this.resetUploadForm();
        })
        .catch((err) => {
          // 处理网络错误等非业务逻辑错误
          console.error("上传错误:", err);
          this.$message.error("上传失败：网络连接出现问题，请稍后重试");
        })
        .finally(() => {
          this.uploadLoading = false;
        });
    },
    //导入库存对账单
    handleUploadInventory() {
      this.resetUploadForm();
      // 获取所有选中的账单
      const selectedRows = this.$refs.reportTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning("请勾选至少一个账单");
        return;
      }
      // 获取选中账单的 ID
      const selectedIds = selectedRows.map(row => row.id);  // 提取选中的账单 ID
      // 如果你需要只选择一个账单的 ID
      if (selectedIds.length > 1) {
        this.$message.warning("只能选择一个账单");
        return;
      }
      const selectedId = selectedIds[0];  // 获取第一个选中的账单 ID
      this.uploadForm.wprId = selectedId;
      // 检查所选账单的状态
      const invalidRows = selectedRows.filter(row => row.status !== '4');
      if (invalidRows.length > 0) {
        this.$message.warning("只能选择状态为【待导入库存对账单】的账单");
        return;
      }
      // 如果所有条件都满足，显示上传对话框
      this.uploadInventoryDialogVisible = true;
    },
    //库存对账单提交按钮
    submitUploadInventory() {
      if (!this.uploadForm.file) {
        this.$message.warning("请上传 CSV 文件");
        return;
      }

      this.uploadLoading = true;

      const formData = new FormData();
      formData.append("csvFile", this.uploadForm.file);
      formData.append("wprId", this.uploadForm.wprId);

      uploadWalmartInventoryReconciliationReport(formData)
        .then((res) => {
          // 检查响应中是否包含错误信息
          if (res.success === false) {
            this.$message.error(res.error || "上传失败，请稍后重试");
            return;
          }

          this.$message.success("Walmart库存对账单上传成功！");
          this.uploadInventoryDialogVisible = false;
          this.getList();
          // 清空上传表单内容
          this.resetUploadForm();
        })
        .catch((err) => {
          // 处理网络错误等非业务逻辑错误
          console.error("上传错误:", err);
          this.$message.error("上传失败：网络连接出现问题，请稍后重试");
        })
        .finally(() => {
          this.uploadLoading = false;
        });
    },

    //导入PDF
    handleUploadPdf() {
      this.resetUploadForm();
      // 获取所有选中的账单
      const selectedRows = this.$refs.reportTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning("请勾选至少一个账单");
        return;
      }
      // 获取选中账单的 ID
      const selectedIds = selectedRows.map(row => row.id);  // 提取选中的账单 ID
      // 如果你需要只选择一个账单的 ID
      if (selectedIds.length > 1) {
        this.$message.warning("只能选择一个账单");
        return;
      }
      const selectedId = selectedIds[0];  // 获取第一个选中的账单 ID
      this.uploadForm.wprId = selectedId;
      // 检查所选账单的状态
      const invalidRows = selectedRows.filter(row => row.status !== '3');
      if (invalidRows.length > 0) {
        this.$message.warning("只能选择状态为【待导入pdf账单】的账单");
        return;
      }
      // 如果所有条件都满足，显示上传对话框
      this.uploadPdfDialogVisible = true;
    },
    //PDF提交按钮
    submitUploadPdf() {
      if (!this.uploadForm.file) {
        this.$message.warning("请上传 pdf 文件");
        return;
      }
      this.uploadLoading = true;

      const formData = new FormData();
      formData.append("csvFile", this.uploadForm.file);
      formData.append("wprId", this.uploadForm.wprId);

      uploadWalmartPdfReport(formData)
        .then((res) => {
          // 检查响应中是否包含错误信息
          if (res.success === false) {
            this.$message.error(res.error || "上传失败，请稍后重试");
            return;
          }

          this.$message.success("Walmart-pdf账单上传成功！");
          this.uploadPdfDialogVisible = false;
          this.getList();
          // 清空上传表单内容
          this.resetUploadForm();
        })
        .catch((err) => {
          // 处理网络错误等非业务逻辑错误
          //this.$message.error("上传失败：网络连接出现问题，请稍后重试");
        })
        .finally(() => {
          this.uploadLoading = false;
        });
    },
    //标记库存已对账
    handleUploadIsCheck() {
      // 获取所有选中的账单
      const selectedRows = this.$refs.reportTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning("请勾选至少一个账单");
        return;
      }
      // 获取选中账单的 ID
      const selectedIds = selectedRows.map(row => row.id);  // 提取选中的账单 ID
      // 如果你需要只选择一个账单的 ID
      if (selectedIds.length > 1) {
        this.$message.warning("只能选择一个账单");
        return;
      }
      const selectedId = selectedIds[0];  // 获取第一个选中的账单 ID
      this.uploadForm.wprId = selectedId;
      // 检查所选账单的状态
      const invalidRows = selectedRows.filter(row => (row.status !== '4' && row.status !== '5'));
      if (invalidRows.length > 0) {
        this.$message.warning("只能选择状态为【待导入库存对账单/库存未对账】的账单");
        return;
      }
      this.$modal
        .confirm("您确认所选数据将标记库存已对账吗？")
        .then(() => {
          return uploadWalmartProfitReportInentrotyStatus(selectedId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("标记库存已对账成功!");
        })
        .catch(() => { });
    },
    //标记已收款
    handleUploadIsPaid() {
      // 获取所有选中的账单
      const selectedRows = this.$refs.reportTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning("请勾选至少一个账单");
        return;
      }
      // 获取选中账单的 ID
      const selectedIds = selectedRows.map(row => row.id);  // 提取选中的账单 ID
      // 如果你需要只选择一个账单的 ID
      if (selectedIds.length > 1) {
        this.$message.warning("只能选择一个账单");
        return;
      }
      const selectedId = selectedIds[0];  // 获取第一个选中的账单 ID
      this.uploadForm.wprId = selectedId;
       const selectedRow = selectedRows[0];
      // 检查所选账单的状态
      if (!selectedRow.imagePath || selectedRow.imagePath.trim() === '') {
        this.$message.warning("只能选择已上传收款凭证的账单");
        return;
      }
      this.$modal
        .confirm("您确认所选数据将标记已收款吗？")
        .then(() => {
          return uploadWalmartProfitReportStatus(selectedId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("标记已收款成功!");
        })
        .catch(() => { });
    },
    // 只做格式化
    formatSalesPrice(row) {
      return this.calculateSalesPrice(row).toFixed(2);
    },
    // 计算销售额
    calculateSalesPrice(row) {
      const totalFees = (parseFloat(row.salesProductPrice || 0) +
        parseFloat(row.salesOtherTaxesFee || 0) +
        parseFloat(row.salesCommissionSavings || 0) +
        parseFloat(row.salesCommission || 0) +
        parseFloat(row.salesFundedSavings || 0) +
        parseFloat(row.refundProductPrice || 0) +
        parseFloat(row.refundCommission || 0) +
        parseFloat(row.refundFundedSavings || 0) +
        parseFloat(row.wfsFulfillmentFee || 0) +
        parseFloat(row.wfsReturnShippingFee || 0) +
        parseFloat(row.wfsStorageFee || 0) +
        parseFloat(row.wfsAdjustments || 0) +
        parseFloat(row.wfsInventoryTransferFee || 0) +
        parseFloat(row.wfsRcFee || 0) +
        parseFloat(row.wfsChargeFee || 0) +
        parseFloat(row.productAdvertising || 0) +
        parseFloat(row.otherFee || 0) +
        parseFloat(row.sem || 0));

      return totalFees; // 保留两位小数
    },
    // 格式化最终人民币金额：只在超过两位小数时向上取整
    formatFinalCny(row) {
      const sales = this.calculateSalesPrice(row);
      const rate = parseFloat(row.rate) || 0;
      const raw = sales * rate;
      // 向上取两位小数（仅当第三位及以后有值时才进一分）
      const rounded = Math.ceil(raw * 100) / 100;
      return rounded.toFixed(2);
    },
    // 计算毛利率
    calculateProfitMargin(row) {
      // 1. 美元销售额 → 人民币销售额
      const salesUsd = row.salesProductPrice;//this.calculateSalesPrice(row);
      const rate = parseFloat(row.rate) || 0;
      const salesCny = salesUsd * rate;
      if (salesCny === 0) return '';

      // 2. 人民币成本 = productCost + firstLeg
      const costCny = (parseFloat(row.productCost) || 0)
        + (parseFloat(row.firstLeg) || 0);

      // 3. 打款金额：先格式化再 parse 回数字
      const paidCny = parseFloat(this.formatFinalCny(row)) || 0;
      // 4. 毛利率 (%) = (打款金额 — 成本) / 人民币销售额 × 100
      const margin = ((paidCny - costCny) / salesCny) * 100;

      return margin.toFixed(2) + '%';
    },
    //<!-- 汇总所有费用字段 -->
    getTotalRow(details) {
      const total = {
        sku: '合计',
        imageUrl: '',
        gtin: '',
        qty: new Decimal(0),
        adjustQty: new Decimal(0),
        refundQty: new Decimal(0),
        salesProductPrice: new Decimal(0),
        salesOtherTaxesFee: new Decimal(0),
        salesCommissionSavings: new Decimal(0),
        salesCommission: new Decimal(0),
        salesTax: new Decimal(0),
        salesTaxWithheld: new Decimal(0),
        salesFundedSavings: new Decimal(0),
        refundProductPrice: new Decimal(0),
        refundCommission: new Decimal(0),
        refundFundedSavings: new Decimal(0),
        refundTax: new Decimal(0),
        refundTaxWithheld: new Decimal(0),
        wfsFulfillmentFee: new Decimal(0),
        wfsReturnShippingFee: new Decimal(0),
        wfsStorageFee: new Decimal(0),
        wfsAdjustments: new Decimal(0),
        wfsInventoryTransferFee: new Decimal(0),
        wfsRcFee: new Decimal(0),
        wfsChargeFee: new Decimal(0),
        productAdvertising: new Decimal(0),
        sem: new Decimal(0),
        otherFee: new Decimal(0),
        productCost: new Decimal(0),
        firstLeg: new Decimal(0),
        total: new Decimal(0)
      }

      const sumFields = Object.keys(total).filter(key => !['sku', 'imageUrl', 'gtin'].includes(key))
      const quantityFields = ['refundQty', 'qty', 'adjustQty'] // 定义数量字段

      // 过滤掉已经是“合计”的行，防止重复加总
      const filteredDetails = details.filter(row => row.sku !== '合计')

      const calculatedRows = filteredDetails.map(row => {
        let rowTotal = new Decimal(0)
        const newRow = { ...row }

        sumFields.forEach(key => {
          const value = row[key]
          if (typeof value === 'number' || (typeof value === 'string' && value.trim() !== '')) {
            try {
              const decimalVal = new Decimal(value || 0)
              total[key] = total[key].plus(decimalVal)
              rowTotal = rowTotal.plus(decimalVal)
            } catch (e) {
              console.warn(`字段 ${key} 加总出错`, value)
            }
          }
        })

        newRow.total = rowTotal.toFixed(2)
        return newRow
      })

      // 计算整行合计的 total 值
      total.total = sumFields.filter(key => !quantityFields.includes(key)).reduce((acc, key) => acc.plus(total[key]), new Decimal(0))

      // 格式化为展示所需格式（保留两位）
      const result = {}
      Object.keys(total).forEach(key => {
        if (quantityFields.includes(key)) {
          // refundQty 显示为整数，不带小数点
          result[key] = total[key] instanceof Decimal ? total[key].toFixed(0) : String(Math.round(total[key] || 0))
        } else {
          // 其他字段保留两位小数
          result[key] = total[key] instanceof Decimal ? total[key].toFixed(2) : total[key]
        }
      })

      return result
    },
    rowClassName({ row }) {
      return row.sku === '合计' ? 'summary-row' : ''
    },

    //查看匹配的成本和头程
    openShipmentMatchDialog(wprId, sku, gtin) {
      if (!wprId) return;
      this.shipmentMatchData = [];
      this.shipmentMatchParams.wprId = wprId;
      this.shipmentMatchParams.sku = sku;
      this.shipmentMatchParams.gtin = gtin;
      listShipmentMatch(this.shipmentMatchParams).then((response) => {
        this.openShipmentMatchDialogVisible = true;
        this.shipmentMatchData = response.rows;
      });
    },

    /** 上传二次销售商品*/
    async submitAgain() {
      let { authId, file } = this.uploadForm;
      authId = this.uploadForm.authId[2];
      if (!authId || !file) {
        this.$message.warning("请先选择店铺和上传文件");
        return;
      }

      this.uploadLoading = true;

      const formData = new FormData();
      formData.append("file", file);
      formData.append("authId", authId);

      uploadWalmartShipmentStockAgain(formData)
        .then((res) => {
          // 检查响应中是否包含错误信息
          if (res.success === false) {
            this.$message.error(res.error || "上传失败，请稍后重试");
            return;
          }

          this.$message.success("二次销售商品上传成功！");
          this.$refs.reportTable.clearSelection();
          this.getList();
          this.uploadAgainDialogVisible = false;
          // 清空上传表单内容
          this.resetUploadForm();
        })
        .catch((err) => {
          // 处理网络错误等非业务逻辑错误
          console.error("上传错误:", err);
          this.$message.error("上传失败：网络连接出现问题，请稍后重试");
        })
        .finally(() => {
          this.uploadLoading = false;
        });
    },

    onFileChange(event) {
      this.dataFile = event.target.files[0];
    },
    dataUpload() {
      if (!this.dataFile) return;
      const formData = new FormData();
      formData.append('file', this.dataFile);
      uploadInitData(formData)
        .then((res) => {
          // 检查响应中是否包含错误信息
          if (res.success === false) {
            this.$message.error(res.error || "上传失败，请稍后重试");
            return;
          }
        })
    },
    handleExport() {
      const selectedRows = this.$refs.reportTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning("请勾选至少一个账单");
        return;
      }

      this.$modal.loading("正在导出数据，请稍候...");

      // Prepare export data
      const exportData = [];

      // Process each report and its details
      selectedRows.forEach(report => {
        // Add summary row for each report
        const summaryRow = {
          reportCode: report.reportCode,
          shopName: report.shopName,
          payoutAmount: report.payoutAmount,
          rate: report.rate,
          payoutAmountCNY: (report.payoutAmount * report.rate).toFixed(2),
          storageFeeTotal: report.storageFeeTotal,
          adjustmentsTotal: report.adjustmentsTotal,
          disposalFeeTotal: report.disposalFeeTotal,
          inventoryTransferFeeTotal: report.inventoryTransferFeeTotal,
          advertisingFeeTotal: report.advertisingFeeTotal,
          semFeeTotal: report.semFeeTotal,
          otherFeeTotal: report.otherFeeTotal,
          status: this.dict.type.walmart_profit_report_status.find(d => d.value === report.status)?.label || report.status,
          imagePath: report.imagePath,
          startDate: this.parseTime(report.startDate, "{y}-{m}-{d}"),
          endDate: this.parseTime(report.endDate, "{y}-{m}-{d}"),
          createdBy: report.createdBy,
          createTime: this.parseTime(report.createTime, "{y}-{m}-{d}")
        };
        exportData.push(summaryRow);

        // Add details rows if they exist
        if (report.details && report.details.length > 0) {
          report.details.forEach(detail => {
            const detailRow = {
              reportCode: `${report.reportCode} - 明细`,
              imageUrl: detail.imageUrl,
              sku: detail.sku,
              sellerSku: detail.sellerSku,
              gtin: detail.gtin,
              qty: detail.qty,
              adjustQty: detail.adjustQty,
              refundQty: detail.refundQty,
              salesProductPrice: detail.salesProductPrice,
              salesOtherTaxesFee: detail.salesOtherTaxesFee,
              salesCommissionSavings: detail.salesCommissionSavings,
              salesCommission: detail.salesCommission,
              salesTax: detail.salesTax,
              salesTaxWithheld: detail.salesTaxWithheld,
              salesFundedSavings: detail.salesFundedSavings,
              refundProductPrice: detail.refundProductPrice,
              refundCommission: detail.refundCommission,
              refundFundedSavings: detail.refundFundedSavings,
              refundTax: detail.refundTax,
              refundTaxWithheld: detail.refundTaxWithheld,
              wfsFulfillmentFee: detail.wfsFulfillmentFee,
              wfsReturnShippingFee: detail.wfsReturnShippingFee,
              wfsStorageFee: detail.wfsStorageFee,
              wfsAdjustments: detail.wfsAdjustments,
              wfsRcFee: detail.wfsRcFee,
              wfsInventoryTransferFee: detail.wfsInventoryTransferFee,
              wfsChargeFee: detail.wfsChargeFee,
              productAdvertising: detail.productAdvertising,
              sem: detail.sem,
              otherFee: detail.otherFee,
              salesPrice: this.formatSalesPrice(detail),
              rate: report.rate,
              finalCNY: this.formatFinalCny({ ...detail, rate: report.rate }),
              diffQty: detail.diffQty,
              productCost: detail.productCost,
              firstLeg: detail.firstLeg,
              profitMargin: this.calculateProfitMargin({ ...detail, rate: report.rate }),
            };
            exportData.push(detailRow);
          });
        }
      });

      // Generate Excel with images
      this.generateExcelWithImages(exportData);
    },

    generateExcelWithImages(data) {
      // Import Excel export utility
      import('@/vendor/Export2Excel').then(excel => {
        // Define column headers
        const header = [
          '账单编号', '店铺', '打款金额$', '汇率', '打款金额￥',
          'WFS Storage Fee', 'WFS Adjustments', 'WFS RC inventory Disposal Fee',
          'WFS Inventory Transfer Fee', 'Walmart Product Advertising', 'SEM', '账单状态', '图片', '起始日期',
          '结束日期', '创建人', '创建时间', 'SKU',"SellerSku", 'GTIN', '销售数量', '调整数量', '退货数量',
          '销售-商品价格', '销售-其他税费', '销售-佣金节省', '销售-原始佣金', '销售-商品税',
          '销售-扣缴税', '销售-Walmart资助折扣', '退款-商品价格', '退款-商品佣金',
          '退款-Walmart资助折扣', '退款-商品税', '退款-扣缴税', 'WFS 履约费用',
          'WFS 退货运费', 'WFS 仓储费', 'WFS 库存调整费或补偿', 'WFS RC费用', 'WFS 库存转移费',
          'WFS Charge费', '商品广告费', 'SEM', '其他费用', '打款金额$', '汇率', '打款金额￥',
          '库存差异', '产品成本', '头程运费', '毛利率'
        ];

        // Define which fields to export
        const filterVal = [
          'reportCode', 'shopName', 'payoutAmount', 'rate', 'payoutAmountCNY',
          'storageFeeTotal', 'adjustmentsTotal', 'disposalFeeTotal', 'inventoryTransferFeeTotal',
          'advertisingFeeTotal', 'semFeeTotal', 'status', 'imagePath', 'startDate',
          'endDate', 'createdBy', 'createTime', 'sku', 'sellerSku' ,'gtin', 'qty', 'adjustQty', 'refundQty',
          'salesProductPrice', 'salesOtherTaxesFee', 'salesCommissionSavings', 'salesCommission', 'salesTax',
          'salesTaxWithheld', 'salesFundedSavings', 'refundProductPrice', 'refundCommission',
          'refundFundedSavings', 'refundTax', 'refundTaxWithheld', 'wfsFulfillmentFee',
          'wfsReturnShippingFee', 'wfsStorageFee', 'wfsAdjustments', 'wfsRcFee', 'wfsInventoryTransferFee',
          'wfsChargeFee', 'productAdvertising', 'sem', 'otherFee', 'salesPrice', 'rate', 'finalCNY',
          'diffQty', 'productCost', 'firstLeg', 'profitMargin'
        ];

        // Process image URLs for Excel
        const imageColumns = ['imagePath', 'imageUrl'];
        const imageList = [];

        // Map data for export
        const excelData = data.map((item, rowIndex) => {
          return filterVal.map((key, colIndex) => {
            // Handle image columns
            if (imageColumns.includes(key) && item[key]) {
              // Store image info for later processing
              imageList.push({
                row: rowIndex + 1, // +1 for header row
                col: colIndex,
                url: item[key],
                width: 50,
                height: 50
              });
              return ''; // Placeholder for image
            }
            return item[key] !== undefined ? item[key] : '';
          });
        });

        // Export to Excel
        excel.export_json_to_excel({
          header: header,
          data: excelData,
          filename: 'walmart_profit_report',
          autoWidth: true,
          bookType: 'xlsx'
        });

        // Close loading indicator
        this.$modal.closeLoading();
        this.$message.success('导出成功');
      });
    },
    initScrollbar() {
      this.$nextTick(() => {
        const table = this.$refs.reportTable;
        if (!table) {
          return;
        }

        // 移除对主表的宽度设置
        // 只计算scrollWidth用于滚动条，不应用到主表
        const tableWrapper = table.$el.querySelector('.el-table__body-wrapper');
        if (tableWrapper) {
          this.scrollWidth = Math.max(tableWrapper.scrollWidth, 2500);
        }

        // 更新滚动条但不修改表格宽度
        if (this.$refs.fixedScrollbar) {
          this.$refs.fixedScrollbar.update();
        }
      });
    },

    bindTableScrollEvent() {
      this.$nextTick(() => {
        const table = this.$refs.reportTable;
        if (!table) return;
        const tableWrapper = table.$el.querySelector('.el-table__body-wrapper');
        if (tableWrapper) {
          tableWrapper.addEventListener('scroll', this.handleTableScroll);
        }
      });
    },
    removeTableScrollEvent() {
      const table = this.$refs.reportTable;
      if (table) {
        const tableWrapper = table.$el.querySelector('.el-table__body-wrapper');
        if (tableWrapper) {
          tableWrapper.removeEventListener('scroll', this.handleTableScroll);
        }
      }
    },
    handleTableScroll(event) {
      const fixedScrollbar = this.$refs.fixedScrollbar;
      if (!fixedScrollbar) {
        return;
      }
      const scrollbarElement = fixedScrollbar.$el.querySelector('.ps');
      if (scrollbarElement) {
        scrollbarElement.scrollLeft = event.target.scrollLeft;
      }
    },
    handleScrollbarScroll(e) {
      const expandedTables = document.querySelectorAll('.el-table__expanded-cell .el-table__body-wrapper');
      expandedTables.forEach(el => {
        el.scrollLeft = e.target.scrollLeft;
      });
    }
  },
};
</script>

<style>
.summary-row {
  font-weight: bold;
  background-color: #d1ebc3 !important;
  /* 淡绿色底色 */
}

._matchunderlined {
  text-decoration: underline !important;
  cursor: pointer;
}

.red-text {
  color: red;
  font-weight: bold;
}

.table-container {
  width: 800px;
  /* 限制容器宽度以触发水平滚动 */
  overflow-x: hidden;
  /* 隐藏表格默认滚动条 */
}

.fixed-scrollbar {
  position: fixed;
  bottom: 5px;
  left: 0;
  right: 0;
  height: 20px;
  background: #f5f5f5;
  border-top: 1px solid #ddd;
  z-index: 1000;
  /* 强制显示水平滚动条 */
  overflow-x: scroll;
  /* 确保有足够的内容触发滚动条 */
  white-space: nowrap;
}

/* 自定义滚动条样式 */
.fixed-scrollbar::-webkit-scrollbar {
  height: 13px;
  background-color: #f1f1f1;
}

.fixed-scrollbar::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 6px;
}

.el-table.main-table-no-scroll .el-table__body-wrapper,
.el-table.main-table-no-scroll .el-table__header-wrapper {
  overflow-x: hidden !important;
}
</style>
